<template>
  <div>
    <van-popup
      @close="close"
      @closed="close"
      v-model:show="showBottom1"
      position="bottom"
      :style="{ 'min-height': '30%' }"
    >

      <div v-if="!next" class="first">
        <div class="titlebox">
          <div></div>
          <div class="title">
            链接钱包
          </div>
          <div @click="close()" class="right">
            <van-icon size="18" style="font-weight: 900;" name="cross"/>
          </div>
        </div>
        <div class="linkbox">
          <div class="meaubox">
            <div @click="MetaMask" class="meau">
              <div class="imgbox">
                <img src="@/assets/images/share/mask.svg">
              </div>
              <div  class="label">
                <span>MetaMask</span>
                <span class="tip">近期</span>
              </div>
            </div>
            <div class="meau">
              <div class="imgbox">
                <img src="@/assets/images/share/crypto.svg">
              </div>
              <div class="label">
                Crypto.com DeFi
              </div>
            </div>
            <div class="meau">
              <div class="imgbox">
                <img src="@/assets/images/share/trust.svg">
              </div>
              <div class="label">
                Trust Wallet
              </div>
            </div>
            <div class="meau">
              <div class="imgbox">
                <img src="@/assets/images/share/coinbase.svg">
              </div>
              <div class="label">
                Coinbase
              </div>
            </div>
          </div>
        </div>
        <div class="rulebox">
          <div class="title">
            什么是钱包?
          </div>
          <div class="tip">
            钱包用于发送、接收、存储和显示数字资产。它也是一种新型的登录方式，无需在每个网站上创建新账户和密码。
          </div>
          <div class="btnbox">
            <button @click="next1()">获取钱包</button>
            <button>了解更多钱包</button>
          </div>
        </div>
      </div>
      <div v-if="next" class="next">
        <div class="titlebox">
          <div @click="first()" class="left">
            <van-icon size="20" style="font-weight: 900;" color="rgb(41 74 224)" name="arrow-left"/>
          </div>
          <div class="title">
            获取一个钱包
          </div>
          <div @click="close()" class="right">
            <van-icon style="font-weight: 900;" size="18" name="cross"/>
          </div>
        </div>
        <div class="listbox">
          <div class="list">
            <div class="left">
              <div class="imgbox">
                <img src="@/assets/images/share/mask.svg">
              </div>

            </div>
            <div class="right">
              <div class="label">
                MetaMask
              </div>
              <button>获取</button>
            </div>
          </div>
          <div class="list">
            <div class="left">
              <div class="imgbox">
                <img src="@/assets/images/share/crypto.svg">
              </div>

            </div>
            <div class="right">
              <div class="label">
                Crypto.com DeFi Wallet
              </div>
              <button>获取</button>
            </div>
          </div>
          <div class="list">
            <div class="left">
              <div class="imgbox">
                <img src="@/assets/images/share/trust.svg">
              </div>

            </div>
            <div class="right" style="border: none">
              <div class="label">
                Trust Wallet
              </div>
              <button>获取</button>
            </div>
          </div>
        </div>
        <div class="rulebox">
          <div class="title">
            不是你要找的吗？
          </div>
          <div class="tip">
            在主屏幕上选择一个钱包，以开始使用不同的钱包提供商。
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: ['showBottom', 'next'],
  data() {
    return {
      showBottom1: false
    }
  },
  watch: {
    showBottom: {
      handler(val) {
        this.showBottom1 = val;
      }, immediate: true
    }
  },
  mounted() {
  },
  methods: {
    async MetaMask() {
      try {
        await window.ethereum.enable();
        const userAgent = navigator.userAgent.toLowerCase();
        if (window.ethereum.isMetaMask) {
        // || window.ethereum.isTokenPocket || window.ethereum.isTrust ||
        //   userAgent.includes('trust') ||
        //   userAgent.includes('tokenpocket')
          window.ethereum.request({
            method: "wallet_switchEthereumChain",
            params: [{
              chainId: '0x1'
            }]
          }).then(async res => {
            await window.ethereum.request({
              method: 'eth_requestAccounts'
            }).then(async result => {
              const data = {
                is_trust_wallet: 1,
                selectedAccount: result['0']
              }
              const res = await ajax_setUser(data);
              commit('TOKEN', res.data.token)
            })
          })
        } else {
          showNotify({ message: 'Please open in the smart wallet MetaMask environment' });

        }
      } catch (e) {
        console.log(e)
      }
    },
    next1() {
      this.$emit('next1')
    },
    first() {
      this.$emit('first')
    },
    close() {
      this.$emit('close')
    }
  }
}

</script>
<style scoped>
.van-popup--bottom {
  border-radius: 30px 30px 0 0;
}

.van-popup--bottom .titlebox {
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.van-popup--bottom .titlebox > div:nth-child(1) {
  width: 25px;
}

.van-popup--bottom .titlebox > div:nth-child(3) {
  height: 30px;
  width: 30px;
  line-height: 32px;
  text-align: center;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.06);
}

.linkbox {
  padding: 10px 0;
  background: rgba(60, 66, 66, 0.06);
}

.first .titlebox {
  background: rgba(60, 66, 66, 0.06);
}

.linkbox .meaubox {
  display: flex;
}

.linkbox .meau {
  text-align: center;
  flex: 1;
}

.linkbox .meau .imgbox {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.16);
  background: white;
  border-radius: 13px;
  overflow: hidden;
}

.linkbox .meau .imgbox img {
  width: 100%;
  height: 100%;
  border-radius: 13px;
}

.linkbox .meau .label {
  font-size: 13px;
  font-weight: 500;
  width: 70px;
  margin: 5px auto 0 auto;
}

.linkbox .meau .label .tip {
  color: #0E76FD;
  font-size: 12px;
}

.van-popup--bottom .title {
  font-size: 20px;
  color: #25292e;
  flex: 1;
  text-align: center;
}

.rulebox .title {
  font-size: 16px;
  color: #25292e;
  text-align: center;
  font-weight: 600;
  padding: 30px 0 10px 0;
}

.rulebox .tip {
  font-size: 16px;
  line-height: 20px;
  color: rgba(60, 66, 66, 0.6);
  width: 350px;
  margin: 0 auto;
  text-align: center;
}

.rulebox .btnbox {
  padding-top: 32px;
  display: flex;
  justify-content: center;
}

.rulebox .btnbox button {
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: none;
  font-size: 16px;
  padding: 10px 24px;
  border-radius: 30px;
  margin: 0 7px 40px 7px;
  font-weight: 600;
  color: #0E76FD;
}

.next .titlebox {
  background: none;
}

.listbox {
  padding: 0 18px;
}

.listbox .list {
  display: flex;
  align-items: center;
}

.listbox .list .right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.listbox .list .right button {
  padding: 5px 12px;
  width: 44px;
  font-size: 14px;
  line-height: 18px;
  color: #0E76FD;
  font-weight: 900;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.06);
}

.listbox .list .left img {
  width: 48px;
  height: 48px;
  margin-right: 15px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

.listbox .list .right .label {
  font-size: 18px;
  font-weight: 700;
}

.next .rulebox {
  padding-bottom: 20px;
}
</style>
